<template>
	<view style="height: 100%;display: flex;flex-direction: column;">
		<scroll-view scroll-y="true" :style="{ height: types == 1 ? '100%' : '90%' }">
			<div class="content">
				<div class="task-card" v-for="task in genjinDataList" :key="task.id">
					<div class="task-header">
						<div class="task-title">{{ task.cname }}</div>
						<div style="display: flex; align-items: center;">
							<image class="navimgs" src="/static/time.png" mode=""></image>
							<div class="task-status">
								{{task.status == 0?'无计划':task.status == 1?"计划中":'已完成'}}
							</div>
						</div>
					</div>
					<div class="task-info">
						<!-- <image class="navimgs" src="/static/user.png" mode=""></image> -->
						客户：
						<u-avatar fontSize="14" :src="task.avatar" randomBgColor
							style="margin-right: 10rpx;"></u-avatar>
						{{ task.cname }}
					</div>
					<!-- <div class="task-info">内容</div> -->
					<view style="display: flex;align-items: center;	margin-bottom: 10px;" v-if="task.followType ==1">
						<u--image src="/static/genjin/text.png" width="40rpx" height="40rpx"></u--image>
						<text class="item-text">文字记录</text>
					</view>
					<view style="display: flex;align-items: center;" v-if="task.followType ==4">
						<u--image src="/static/genjin/chat1.png" width="40rpx" height="40rpx"></u--image>
						<text class="item-text">发短信</text>
					</view>
					<view style="display: flex;align-items: center;" v-if="task.followType ==3">
						<u--image src="/static/genjin/wechat.png" width="40rpx" height="40rpx"></u--image>
						<text class="item-text">发微信</text>
					</view>
					<view style="display: flex;align-items: center;" v-if="task.followType ==3">
						<u--image src="/static/genjin/call.png" width="40rpx" height="40rpx"></u--image>
						<text class="item-text">打电话</text>
					</view>
					<view style="display: flex;align-items: center;" v-if="task.followType ==5">
						<u--image src="/static/genjin/chat.png" width="40rpx" height="40rpx"></u--image>
						<text class="item-text">发邮件</text>
					</view>
					<u--textarea v-model="task.neirong" disabled autoHeight></u--textarea>
					<!-- <div class="task-project">{{task.neirong}}</div> -->
					<div class="task-time">跟进时间：{{ task.remindTime }}</div>
					<div class="task-time">创建时间：{{ task.ctime }}</div>
					<div class="task-footer">
						<div class="follower">
							<div>{{ task.userId }}</div>
							<!-- <div class="create-info">
								{{ task.ctime }} 创建
							</div> -->
						</div>
						<div>
							<u-icon name="more-dot-fill" color="#2979ff" size="28" @click="moreClick(task)"></u-icon>
						</div>

					</div>
				</div>
				<view class="no-more">
					<text style="color: #2979ff;" v-if="activityMores" @click="activityMore">点击加载更多</text>
					<text v-else>~ 没有更多了 ~</text>
				</view>
			</div>
		</scroll-view>
		<!-- 过滤弹窗 -->
		<u-popup @close="close" :show="showpop" :closeable="closeable" :closeOnClickOverlay="closeable" mode="center"
			:round="10">
			<view class="popnoxssty">
				<view class="poptitle">
					过滤
				</view>
				<scroll-view class="scroll-box">
					<!-- scroll-y="false" -->
					<view class="scboxs">
						跟进内容：<u--input style="width: 100%;" placeholder="请输入内容" border="bottom"></u--input>
					</view>
					<view class="scboxs" @click="show = true">
						计划类型：<u--input style="width: 100%;" placeholder="请选择类型" border="bottom"></u--input>
					</view>
					<view class="scboxs">
						跟进时间：<u--input style="width: 100%;" placeholder="请选择时间" border="bottom"></u--input>
					</view>
					<view class="scboxs">
						创建时间：<u--input style="width: 100%;" placeholder="请选择时间" border="bottom"></u--input>
					</view>
				</scroll-view>

				<view class="save-box" @click="saveCliak">
					保存
				</view>
			</view>
		</u-popup>
		<!-- 编辑弹窗 -->
		<u-popup @close="closeEdit" :show="showEdit" :closeable="closeable" :closeOnClickOverlay="closeable"
			mode="center" :round="10">
			<view class="popnoxssty">
				<view class="poptitle">
					编辑
				</view>
				<scroll-view class="scroll-box">
					<!-- scroll-y="false" -->
					<view class="scboxs">
						跟进方式：
						<u-action-sheet :actions="genjinactions" :closeOnClickOverlay="true" :closeOnClickAction="true"
							@select="selectGenjinClick" @close="closeGenjinSelect" :show="show"></u-action-sheet>
						<view style="display: flex;" @click="show = true">
							<text>{{selectedAction}}</text><u-icon name="arrow-down"></u-icon>
						</view>
					</view>
					<view class="scboxs">
						跟进内容：
						<!-- <u--input style="width: 100%;" v-model="editShowData.neirong"  border="bottom"></u--input> -->
						<u--textarea v-model="editgenjinNeirong" placeholder="请输入内容" count></u--textarea>
					</view>
					<view class="scboxs" @click="showTimerPicker = true">
						提醒时间：<u--input style="width: 100%;" :value="editShowData.remindTime" border="bottom"></u--input>
					</view>
					<view class="scboxs" @click="uploadBtn">
						选择附件：<u--input :value="uploadValue" style="width: 100%;" border="bottom"></u--input>
					</view>
				</scroll-view>
				<view class="save-box" @click="saveEdit">
					保存修改
				</view>
			</view>
		</u-popup>
		<!-- 修改日期时间 -->
		<u-datetime-picker :show="showTimerPicker" :minDate="minTimeDate" :maxDate="maxTimeDate" :formatter="formatter"
			@confirm="onDateTimeConfirm" @cancel="closeTimerPicker" title="选择日期时间" confirmColor="#2979ff">
		</u-datetime-picker>
		<u-picker :show="typeShow" :columns="typeColumns" @confirm="confirm" @cancel='typeShow = false'></u-picker>
		<!-- 更多按钮 -->
		<u-action-sheet :actions="actions" :closeOnClickOverlay="true" :closeOnClickAction="true" @select="selectClick"
			@close="closeSelect" :show="moreShow"></u-action-sheet>
		<!-- 删除按钮确认框 -->
		<u-modal :show="deleteShow" :title="title" :content='content' showConfirmButton showCancelButton buttonReverse
			@confirm="deleteconfirm" @cancel="deletecancel"></u-modal>
	</view>
</template>

<script>
	import api from "@/utils/api.js";
	import request from "@/utils/request.js";
	export default {
		props: {
			showType: { //群：1   个人：0 
				type: String,
				default: '3'
			},
			types: { //tabbar点击入口  和跟进情况入口  区分
				type: String,
				default: '0'
			},
			filtrate: {
				type: Object,
				default: () => {
					id: 0
				}
			},
			dataID: {
				type: Object,
				default: () => {}
			}
		},

		data() {
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth();
			const day = now.getDate();
			return {
				deleteShow: false,
				title: '提示',
				content: '是否删除',
				uploadValue: "", //文件名称（选择上传的）
				upLoadArray: [],
				showTimerPicker: false, //日期时间选择框
				datetimeValue: '',
				minTimeDate: Number(new Date().getTime()), //获取当前时间点
				maxTimeDate: Number(new Date(year + 1, 11, 31)), // 明年12月31日
				activepage: 10, //pageSize
				activityMores: true, //加载更多按钮  显隐
				activelyTotal: '', //活动总数
				genjinDataList: [], //跟进list数据
				infoDataList: this.ddd,
				closeable: true,
				showpop: false,
				selectedAction: '📝今日待办',
				editgenjinNeirong: '', //编辑内容变量  回显
				show: false,
				typeShow: false,
				moreShow: false, //更多按钮。。。
				typeColumns: ['深圳', '厦门', '上海', '拉萨'],
				actions: [{
						name: '设为完成',
						id: 1,
					},
					{
						name: '编辑',
						id: 2,
					},
					{
						name: '查看',
						id: 3,
					},
					{
						name: '删除',
						id: 4,
						color: "red",
					},
					{
						name: '取消',
						id: 5,
					}
				],
				genjinactions: [{
						name: '📝文字记录',
						id: 1,
					},
					{
						name: '✉️发短信',
						id: 4,
					},
					{
						name: '💬发微信',
						id: 2,
					},
					{
						name: '📞打电话',
						id: 3,
					},
					{
						name: '📧发邮件',
						id: 5,
					},
				],
				todoTypeList: [{
						value: 0,
						label: '今日待办'
					},
					{
						value: 1,
						label: '待办任务'
					},
					{
						value: 2,
						label: '跟进记录'
					}
				],
				filterType: 0,
				filterTypeList: [{
					value: 0,
					label: '筛选'
				}],
				title: '',
				tasks: [{
						id: 1,
						title: '信息',
						status: '计划中',
						info: '总',
						project: '@石家庄门窗',
						time: '2025-07-07 18:37',
						followerAvatar: '天',
						followerName: '天天',
						createTime: '2025-07-07 15:36'
					},
					{
						id: 2,
						title: '设计方案',
						status: '进行中',
						info: '客户需求分析',
						project: '@北京装修',
						time: '2025-07-08 10:00',
						followerAvatar: '张',
						followerName: '张三',
						createTime: '2025-07-06 09:20'
					},
					{
						id: 3,
						title: '材料采购',
						status: '待开始',
						info: '铝合金型材',
						project: '@上海工程',
						time: '2025-07-10 14:30',
						followerAvatar: '李',
						followerName: '李四',
						createTime: '2025-07-05 16:45'
					},
					{
						id: 4,
						title: '材料采购',
						status: '待开始',
						info: '铝合金型材',
						project: '@上海工程',
						time: '2025-07-10 14:30',
						followerAvatar: '李',
						followerName: '李四',
						createTime: '2025-07-05 16:45'
					},
					{
						id: 5,
						title: '材料采购',
						status: '待开始',
						info: '铝合金型材',
						project: '@上海工程',
						time: '2025-07-10 14:30',
						followerAvatar: '李',
						followerName: '李四',
						createTime: '2025-07-05 16:45'
					},
					{
						id: 6,
						title: '材料采购',
						status: '待开始',
						info: '铝合金型材',
						project: '@上海工程',
						time: '2025-07-10 14:30',
						followerAvatar: '李',
						followerName: '李四',
						createTime: '2025-07-05 16:45'
					}
				],
				isFilterVisible: false, // 控制筛选弹窗显示
				filterParams: {
					content: '', // 跟进内容
					planType: '', // 计划类型
					followTime: '', // 跟进时间
					createTime: '' // 创建时间
				},
				showEdit: false, //编辑显隐
				editShowData: [],
			}
		},
		onLoad() {

		},
		created() {
			// this.getGenjinList()
		},
		computed: {

		},
		methods: {
			getGenjinList(isremindType) {
				let data = {
					pageSize: this.activepage,
					pageNum: 1
				}

				if (isremindType != "0" && isremindType) {
					data['isremind'] = isremindType;
				}
				if (this.showType == 1) {
					data['chatId'] = this.dataID.userId;
					request(api.getGenjinQunList, "GET", data)
						.then(res => {
							console.log(res, "跟进情况 群 列表LIst");
							this.activelyTotal = res.total;
							this.genjinDataList = res.rows;
						})
						.catch(err => {})
				} else if (this.showType == 0) {
					data['externalUserid'] = this.dataID.userId;
					request(api.getGenjinList, "GET", data)
						.then(res => {
							console.log(res, "跟进情况 个人 列表LIst");
							this.activelyTotal = res.total;
							this.genjinDataList = res.rows;
						})
						.catch(err => {})
				}

			},
			// 修改编辑跟进情况信息
			editGenjinList(data) {
				// let data = {
				// 	externalUserid:""
				// }
				request(api.editGenjinList, "PUT", data)
					.then(res => {
						console.log(res, "跟进情况修改成功");
						this.uploadArray = [];
					})
					.catch(err => {})
			},
			closeSelect() {
				this.show = false
			},
			close() {
				this.showpop = false
				// console.log('close');
			},

			closeEdit() {
				this.showEdit = false;
				this.uploadArray = [];
				this.getGenjinList()
			},
			// 保存按钮方法
			saveEdit() {
				// this.editShowData.neirong
				console.log(this.editgenjinNeirong);
				console.log(this.editShowData.remindTime);

				// editGenjinList
				let data = {
					externalUserid: this.editShowData.externalUserid,
					id: this.editShowData.id, //id
					neirong: this.editgenjinNeirong, //内容
					remindTime: this.editShowData.remindTime, //时间
					isremind: this.editShowData.isremind, //跟进提醒时间 状态
					followType: this.editShowData.followType,
				}
				if (data.remindTime != null) {
					data.isremind = 1;
				} else {
					data.isremind = 0;
				}
				// files: this.uploadFiles.length ? this.uploadFiles : []
				if (this.uploadArray.length > 0) {
					data['files'] = this.uploadArray
				} else {

				}
				// console.log(this.uploadArray, '333333333');
				// console.log(data, '33333333333333333333');
				this.editGenjinList(data)
				this.closeEdit()
			},
			// 删除跟进记录
			deleteGenjin(id) {
				request(api.genjinDelete + `/${id}`, "DELETE")
					.then(res => {
						console.log(res);
						this.moreShow = false;
						this.deleteShow = false;
						this.getGenjinList()
					})
					.catch(err => {
						console.log(err);
					})
			},
			selectClick(item) {
				this.selectedAction = this.genjinStatus(this.editShowData.followType); //编辑窗口里的状态回显示
				// console.log(this.editShowData.followType,'this.editShowData.followType');
				// console.log(item);
				if (item.id == 5) {
					this.moreShow = false;
				}
				switch (item.id) {
					case 1:
						this.toFinish()
						break;
					case 2:
						this.moreShow = false;
						this.showEdit = true
						break;
					case 3:
						uni.navigateTo({
							url: `/pages/management/components/gjjhDetail?Id=${this.editShowData.id}`
						});
						this.moreShow = false;
						break;
					case 4:
						// this.deleteGenjin(this.editShowData.id);
						this.deleteShow = true;
						break;

				}
			},
			// 设为完成
			toFinish() {
				let data = {
					status: 2,
					id: this.editShowData.id, //id
				}
				request(api.editGenjinList, "PUT", data)
					.then(res => {
						// console.log(res, "跟进情况修改成功");
						// this.uploadArray = [];
					})
					.catch(err => {})
			},
			deleteconfirm() {
				this.deleteGenjin(this.editShowData.id);
				// console.log(api.genjinDelete + `/${this.editShowData.id}`);
			},
			deletecancel() {
				this.deleteShow = false;
			},

			selectGenjinClick(item) {
				this.selectedAction = this.genjinStatus(item.id); //编辑窗口里的状态回显示
				console.log(item, "selectGenjinClick");
				this.editShowData.followType = item.id;
			},
			closeGenjinSelect() {
				this.show = false
			},
			// 跟进状态回显
			genjinStatus(data) {
				const listData = this.genjinactions;
				const option = listData.find(
					item => item.id == data
				);

				return option ? option.name : '未知';
			},
			onTodoTypeChange(value) {
				console.log('待办类型改变:', value);
			},

			// 筛选条件改变
			onFilterChange(value) {
				console.log('筛选条件改变:', value);
			},
			// 显示筛选弹窗
			showFilterModal() {
				this.isFilterVisible = true
				this.showpop = true
				console.log('显示筛选栏');
			},

			// 隐藏筛选弹窗
			hideFilterModal() {
				this.isFilterVisible = false
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			},
			// 确认筛选
			confirmFilter() {
				console.log('筛选条件:', this.filterParams)

				// 执行筛选逻辑
				this.hideFilterModal()

				uni.showToast({
					title: '筛选条件已应用',
					icon: 'success'
				})
			},
			onDateTimeConfirm(e) {
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minu = date.getMinutes();
				console.log(date, '日期时间', `${year}-${month}-${day} ${hour}:${minu}`);
				this.datetimeValue = `${year}-${month}-${day} ${hour}:${minu}`;
				this.showTimerPicker = false;
				this.editShowData.remindTime = this.datetimeValue; //时间回显

			},
			// 取消日期时间选择
			closeTimerPicker() {
				this.showTimerPicker = false;
				this.datetimeValue = "";
			},
			// 日期格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}点`
				}
				if (type === "minute") {
					return `${value}分`
				}
				return value
			},
			// 上传文件方法
			uploadBtn() {
				// 上传文件示例
				// 选择文件
				const token = uni.getStorageSync('wxwork_token');
				uni.chooseFile({
					count: 1, // 选择单个文件
					type: 'all', // 所有文件类型
					success: (res) => {
						console.log(res.tempFiles[0]);
						let file = res.tempFiles[0];
						uni.uploadFile({
							url: api.upLoadList,
							file: res.tempFiles[0],
							header: {
								'Authorization': 'Bearer ' + token
							},
							success: (ress) => {
								console.log(JSON.parse(ress.data).msg);
								if (JSON.parse(ress.data).code == 200) {
									uni.showToast({
										title: "上传成功", // 提示内容（必填）
										icon: "success", // 图标：success/error/loading/none（默认success）
										duration: 1000, // 显示时长（ms，默认1500）
										position: "top" // 位置：top/middle/bottom（默认middle）
									});
									// this.uploadArray = [];
									this.uploadArray = this.uploadArray || [];
									this.uploadArray.push(JSON.parse(ress.data).msg); //添加附件信息
									this.uploadValue = this.uploadValue + '.' +
										`${JSON.parse(ress.data).msg}`;
									console.log(this.uploadArray, "this.uploadArray");
								}
							},
							fail: (err) => {
								console.error('上传附件失败:', err)
								uni.showToast({
									title: err, // 提示内容（必填）
									icon: "error", // 图标：success/error/loading/none（默认success）
									duration: 1000, // 显示时长（ms，默认1500）
									position: "top" // 位置：top/middle/bottom（默认middle）
								})
							}
						})
					},
					fail: (err) => {
						console.error('选择文件失败:', err)
					}
				})
				console.log(this.uploadFiles, "选择的文件");
			},
			saveCliak() {
				this.getGenjinList()
			},
			moreClick(data) {
				this.moreShow = true
				this.editShowData = [];
				this.editShowData = data; //当前的卡片数据
				this.editgenjinNeirong = data.neirong
				// this.showEdit = true
			},
			activityMore() {
				this.activepage = this.activepage + 10;
				if (this.activepage > this.activelyTotal + 10) {
					this.activityMores = false;
				} else {
					this.getGenjinList()
				}

			},
		}
	}
</script>

<style>
	.container {
		/* display: flex; */
		/* flex-direction: column; */
		/* height: calc(100% - var(--window-top)); */
		height: 100%;
		background-color: pink;
		overflow-y: auto;
	}

	.navimgs {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		/* margin: 0rpx auto; */
		/* display: flex; */
		/* margin-top: 20rpx; */
	}

	/* 自定义导航栏 */
	.custom-navbar {
		height: 44px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		border-bottom: 1px solid #eee;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.no-more {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 26rpx;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: bold;
	}

	/* 内容区域 - 减去导航栏和TabBar高度 */
	.content {
		/* flex: 1; */
		/* padding: 44px 0 50px; */
		/* 上下内边距等于导航栏和TabBar高度 */
		overflow-y: auto;
	}

	/* 筛选区域 */
	.filter-section {
		display: flex;
		padding: 15px 0;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		box-sizing: border-box;
	}

	.filter-item {
		flex: 1;
		margin-right: 10px;
	}

	.filter-item:last-child {
		margin-right: 0;
	}

	.contentView {
		/* overflow-y: auto; */
	}

	.task-list {
		/* flex: 1; */
		/* overflow-y: auto; */
	}

	/* 任务卡片 */
	.task-card {
		background-color: #fff;
		margin: 10px 15px;
		border-radius: 8px;
		padding: 15px;
		/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
		box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 18rpx;
	}

	.task-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.task-title {
		font-size: 16px;
		font-weight: bold;
	}

	.task-status {
		background-color: #ff9500;
		color: #fff;
		padding: 2px 8px;
		border-radius: 10px;
		font-size: 12px;
	}

	.task-info {
		margin-bottom: 10px;
		color: #666;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}

	.task-project {
		color: #007AFF;
		margin: 5px 0;
		/* display: -webkit-box; */
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5;
		/* 重要 */
	}

	.task-time {
		color: #999;
		font-size: 14px;
		margin: 5px 0;
	}

	.task-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.follower {
		display: flex;
		align-items: center;
	}

	.follower-avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #007AFF;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		margin-right: 10rpx;
	}

	.create-info {
		margin-left: 10rpx;
		color: #999;
		font-size: 12px;
	}

	.popnoxssty {
		width: 660rpx;
		// padding-bottom: 60rpx;

		.scroll-box {
			/* height: 35vh; */
		}

		.poptitle {
			text-align: center;
			margin-top: 25rpx;
		}

		.scboxs {
			margin: 20rpx 60rpx 0;
			/* margin-left: 60rpx; */
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.inpboxs {
			width: 82%;
			margin-left: 9%;
			/* border: 1px solid #999999; */
			/* display: flex; */
			/* align-items: center; */
			/* justify-content: space-between; */

			margin-top: 10rpx;

			.inpsty {
				margin-left: 20rpx;
			}

			.danwei {
				width: 100%;
				text-align: right;
				margin-right: 20rpx;
			}
		}
	}

	.save-box {
		background-color: #3588e5;
		color: #ffffff;
		width: 60%;
		margin: 40rpx auto;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 16rpx;
	}
</style>